<template>
	<view>
		<u-navbar :title="title" :title-size="36" :title-width="500" title-color="#fff" back-icon-name="arrow-left"
			back-icon-color="#fff" :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="160" prop="name">
				<u-form-item>
					<view class="top">
						<view class="text">
							要求完成时间
						</view>
						<u-input v-model="form.stateTime" type="text" :border="true" disabled placeholder="请选择时间"
							@click="chooseTime" />
							<img class="rightIcon" src="../../../assets/images/home/icon_calendar.png">
					</view>
				</u-form-item>
				<u-form-item label="指派人员" style="border-bottom: 0;">
					<!-- <u-icon name="plus-circle" color="#666" size="60" @click="handleAdd"></u-icon> -->
					<u-icon name="plus" color="#4187f1" size="30" class="addIcon"  @click="handleAdd"></u-icon>
				</u-form-item>
				<scroll-view scroll-y="true" style="height: 900rpx;">
					<div class="tagsBox">
						<div v-for="tag in personList" class="tag" v-if="tag.checked">
							<img src="../../../assets/images/home/avatar.png" />
							<u-tag :text="tag.name" mode="light" closeable :disable-transitions="false"
								@close="closeChecked(tag)" />
							</u-tag>
						</div>
					</div>
				</scroll-view>
				<u-button :disabled="disabled" type="primary" shape="circle" @click="saveUser">提交</u-button>
			</u-form>
		</view>
		<u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		name: 'policeCon',
		// props:['personList'],
		components: {},
		onLoad(option) {
			uni.$on('add', (info) => { //开启监听全局的地址改变事件
				this.personList = info.data
				this.userId = info.numID
			})
			this.taskId = option.id
			this.status = option.status
			console.log(this.status)
		},
		onUnload() {
			uni.$off('add') //在此生命周期里销毁地址改变事件的监听
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				lists: [],
				title:'转派',
				showTime: false,
				form: {
					name: '',
					stateTime: "",
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
				},
				status: [],
				personList: [],
				avatarList: [],
				avList: [],
				userId: '',
				taskId:'',
			};
		},
		computed: {
			tabbarList() {
				return this.$store.state.common.tabbarList
			},
			disabled:function(){
				return !this.userId || !this.form.stateTime;
			}
		},
		methods: {
			closeChecked:function(tag){
				tag.checked=false;
				this.userId="";
			},
			chooseTime() {
				this.showTime = true
			},
			confirm(data) {
				this.form.stateTime =
					`${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},
			goBack() {
				uni.navigateBack()
			},
			userAll() {
				this.$api.reqApi.userListAll().then(res => {
					if (res.code == 200) {
						this.personList = res.data
						// let arr2Ids = [];
						this.personList.map(item => {
							item.checked = false
						})

					}
				})
			},
			handleAdd() {
				uni.navigateTo({
					url: '/pages/scheduling/taskManage/contactsList?list=' + encodeURIComponent(JSON.stringify(this
						.personList))
				});
			},
			saveUser() {
				let list = {
					taskId:this.taskId,
					userId: this.userId,
					finalTime: this.form.stateTime
				}
				this.$api.reqApi.dispatchTask(list).then(res => {
					if (res.code == 200) {
						// this.goBack()
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; // 前一个页面
						uni.navigateBack({
						    success: function() {
						        beforePage.search(); // 执行前一个页面的onLoad方法
						    }
						});
					}
				})
				// var that = this;
				// let userIdList = [];

				// that.personList.map(item => {
				// 	if (item.checked) {
				// 		userIdList.push(item.id)
				// 	}
				// })
				// that.form.userIdList = userIdList;
				// if (that.avatarList && that.avatarList.length > 0) { //添加人员
				// 	that.form.userId = that.meetId;
				// 	this.$api.reqApi.dispatchTask(that.form).then(res => {
				// 		if (res.code == 200) {
				// 			this.goBack()
				// 		}
				// 	})
				// } else {
				// 	this.$api.reqApi.meetEdit(that.form).then(res => {
				// 		if (res.code == 200) {
				// 			uni.navigateTo({
				// 				url: '/pages/scheduling/policeConsultation/policeConsultation'
				// 			});
				// 		}
				// 	})
				// }

			}
		},
		mounted() {
			this.userAll()
			if (this.status == 1) {
				this.title = '指派'
			}else {
				this.title = '转派'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 0 30rpx;
		margin-top: 20rpx;
	}
	.rightIcon{
		height: 40rpx;
			margin-top: 9px;
	}
	.top {
		display: flex;
        width: 100%;
		.text {
			line-height: 80rpx;
			margin-right: 20rpx;
		}
	}

	uni-page-body {
		background-color: #fff;
	}

	.tagsBox {
		display: flex;
		flex-flow: wrap;
	}

	.tag {
		margin-right: 10rpx;
		margin-bottom: 10rpx;
        padding-top: 10rpx;
		position: relative;
		img {
			width: 116rpx;
			height: 116rpx;
			border-radius: 8rpx;
			vertical-align: middle;
		}

		.u-tag {
			background-color: transparent;
			border: 0;
			padding: 12rpx;
			font-size: 30rpx;
			color: #666;
			::v-deep .u-icon-wrap{
				position: absolute;
				top:0;
				left: 84rpx;
			}
			::v-deep .u-icon__icon {
				background-color: rgb(39, 127, 230);
				padding: 3px;
				border-radius: 40px;
				color: #fff;
			}
		}
	}

	/deep/ .u-input__right-icon {
		line-height: 70rpx;
	}
</style>
